<template>
  <div class="login">
    <s-Header :name="formType == 'login' ? '登录' : '注册'" :back="'/home'"></s-Header>
    <img class="logo" src="https://s.yezgea02.com/1604045825972/newbee-mall-vue3-app-logo.png" alt="">
    <div class=" login-body login" v-if="formType === 'login'">
      <van-form label-width="2.13333rem" @submit="onSubmit">
        <van-field
          v-model="state.username"
          name="username"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="state.password"
          type="password"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          border
          v-model="state.imgCode"
          type="password"
          name="imgCode"
          label="验证码"
          placeholder="请输入验证码"
        >
          <template #button>
            <vueImgVerify ref="imgCode" ></vueImgVerify>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <div class="link-login" @click="toggle('register')">立即注册</div>
          <van-button block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
    </div>

    <div class="login-body register" v-else>
      <van-form label-width="2.13333rem" @submit="onRegister">
          <van-field
            v-model="state.usernameRegister"
            autocomplete="username"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="state.passwordRegister"
            autocomplete
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="state.imgCode"
            autocomplete="imgCode"
            type="password"
            name="imgCode"
            label="验证码"
            placeholder="请输入验证码"
          >
            <template #button>
              <vueImgVerify v-if="true" ref="imgCode" ></vueImgVerify>
            </template>
          </van-field>
        <div style="margin: 16px;">
          <div class="link-login" @click="toggle('login')">已有登录账号</div>
          <van-button block type="primary" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
    
    <van-button v-if="false" type="primary" @click="cctest">
      重绘canvas
    </van-button>
    
  </div>
</template>

<script setup>
  import sHeader from '@/components/SimpleHeader.vue'
  import { reactive, ref, isRef, isReactive, onMounted } from 'vue'
  import vueImgVerify from '@/components/VueImageVerify.vue'
  import { showSuccessToast, showFailToast } from 'vant'
  import { setLocal } from '@/common/js/utils'
  import { login, register } from '@/service/user'
  import md5 from 'js-md5'
  // 不允许明文传输 md5加密

  // van-cell-group 下面插入 van-field会使最下面的border'消失'
  // 定义相关变量============
  let {imgCodeState, ImgCodehandleDraw } = {};
  const state = reactive({
    username: '',
    password: '',
    usernameRegister:'',
    passwordRegister:'',
    imgCode: '',
  })
  const formType = ref('login')
  const imgCode = ref(null)
  console.log('default_value',imgCodeState, ImgCodehandleDraw)
  onMounted(()=>{
    const imgCodeRef = imgCode.value;
    let {state, handleDraw, bb, cc} = imgCodeRef;
    console.log(1111,state, isReactive(state))
    ImgCodehandleDraw = handleDraw;
  })
  
  // 定义相关方法================
  const toggle = (v) => {
    formType.value = v
    state.imgCode = ''
  }
  const onSubmit = async (values) => {
    console.log('submit', values);
    const imgCodeRef = imgCode.value;
    const {state} = imgCodeRef;
    console.log(1111,values.imgCode.toLowerCase(), state.imgCode.toLowerCase())
    if (values.imgCode.toLowerCase() != state.imgCode.toLowerCase()) {
      showFailToast('验证码有误')
      return
    }
    const { data } = await login({
      "loginName": values.username,
      "passwordMd5": md5(values.password)
    })
    setLocal('token', data)
    // 需要刷新页面，否则 axios.js 文件里的 token 不会被重置
    window.location.href = '/'
  };

  const onRegister = async (values)=>{
    const imgCodeRef = imgCode.value;
    const {state} = imgCodeRef;
    if (values.imgCode.toLowerCase() != state.imgCode.toLowerCase()) {
      showFailToast('验证码有误')
      return
    }
    await register({
      "loginName": values.usernameRegister,
      "password": values.passwordRegister
    })
    showSuccessToast('注册成功')
    toggle('login')
  }

  const cctest = ()=> {
    ImgCodehandleDraw();
  }

</script>

<style lang="less">
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
.login{
  .logo{
    width: 120px;
    height: 120px;
    display: block;
    margin: 80px auto 20px;
  }
  .login-body{
    padding:0px 20px;
    .van-field__button{
      height:40px;
    }
    .login{

    }
    .register{

    }
    .link-login{
      // width:80px;
      font-size: 14px;
      margin-bottom: 16px;
      color: #1989fa;
      display: inline-block;
    }
  }
}
</style>